<template>
    <div class="content-container">
        <Title :icon="'line-chart-fill'" :title="'TOP10数据'"></Title>
        <div class="h-510px ml-16px mr-16px">
            <Tabs v-model="activeIndex" @update:model-value="handleTabClick" active-color="#ffffff">
                <TabItem label="搜索词" path="" :index="0">
                    <Top10List />
                </TabItem>
                <TabItem label="来源网站" path="" :index="1">
                    访客数(UV)
                </TabItem>
                <TabItem label="入口页面" path="" :index="2">
                    浏览量(PV)
                </TabItem>
            </Tabs>
        </div>
        
    </div>
</template>

<script setup lang="ts">
import Tabs from '@/components/Tab/First.vue'
import TabItem from '@/components/Tab/Item.vue'
import Top10List from './Top10List.vue'

const activeIndex = ref(0)

function handleTabClick(val:any) {
    const { index } = val
    activeIndex.value = index
}
</script>

<style scoped>

</style>